<template xmlns:wx="https://jakarta.ee/xml/ns/jakartaee">
	<view class="content">
		<myNavbar :title="addressNow" @handlerChange="handlerChange(record,$event)"></myNavbar>
		<view class="tab">
			<view class="item" v-for="(item, index) in tabList" :key="index" @click="onTab(item)">
				<view :class="tabId == item.id ? 'title-on' : 'title'">{{ item.text }}</view>
			</view>
		</view>

		<view class="list">
			<view class="item" v-if="activityList.length >= 1">
				<view class="left">
					<image :src="activityList[0].img"></image>
				</view>
				<view class="right">
					<view class="line">
						<view class="name">{{ activityList[0].name }}</view>
						<view class="distance">
							{{ addressNow=='请选择'?"":activityList[0].disName?activityList[0].disName:"" }}
						</view>
					</view>
					<view class="time">{{ activityList[0].updateTime || activityList[0].createTime }}</view>
					<text class="text" v-pre
						@click="goActivityDetail(activityList[0])">{{ activityList[0].content }}</text>
					<view class="detail" @click="goActivityDetail(activityList[0])">
						<text>查看详情</text>
						<image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/arrow_right1.png"></image>
					</view>
					<!-- 图片和视频 -->
					<view class="guidebook">
						<view class="img_box">
							<view :class="{'many_img':true}">
								<!-- 遍历 -->
								<!-- 在这里判断图片的数量是单站还是四张，分别给不同样式，来实现，一排是两张还是三张 -->
								<view
									:class="{'img_item':true,'one':activityList[0].list&&activityList[0].list.length===1 , 'four' : activityList[0].list&&activityList[0].list.length === 4 , 'many' : activityList[0].list&&activityList[0].list.length > 4}"
									v-for="(value,index) in activityList[0].list" :key="index">
									<!-- item.type == 2 是视频 -->
									<!-- style 的 宽高是 视频标签 bindloadedmetadata="videometa" 方法里计算的宽高 -->
									<!-- 不是 item.type == 2 就是图片 else -->
									<!-- 如果只有一张图片 bindload="oneImageLoad" 获取图片宽高，并计算宽高比，来判断图片的 mode 是 widthFix 还是 heightFix -->
									<image v-if="activityList[0].list&&activityList[0].list.length===1" class="imgOne"
										@click="previewImage($event,index, activityList[0])" :bindload="oneImageLoad"
										:src="value" :data-sources="value" :data-index="index"
										:mode="isHeightMode ? 'heightFix' : 'widthFix'"
										:style="{'height': isHeightMode? '500rpx' : ''}"></image>
									<!-- 多张图片 一律使用 aspectFill 并固定宽高 -->
									<image v-else class="img" :src="value"
										@click="previewImage($event,index, activityList[0])" :data-sources="value"
										:data-index="index" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ad-box">
				<swiper class="ad" autoplay="true" interval="3000" circular="true" :style="{'height':'400rpx' }">
					<swiper-item class="ad-item">
						<ad unit-id="adunit-b729bdcdcd18c226" ad-type="video" ad-theme="white" v-if="videoAd"
							@error="adError" @close="adClose"></ad>
					</swiper-item>
					<swiper-item class="ad-item" v-for="(item, index) in bannerList" :key="index"
						@click="goSwiperDetail(item)" v-if="item.status==0">
						<!--        <view class="ad-item" v-for="(item, index) in adList" :key="index" @click="goAd(item)">-->
						<image class="ad-img" v-if="item" :src="item.img"></image>
						<!--        </view>-->
					</swiper-item>
				</swiper>
			</view>
			<view class="item" v-for="(item, idx) in activityList" :key="idx" v-if="idx != 0">
				<view class="left">
					<image :src="item.img"></image>
				</view>
				<view class="right">
					<view class="line">
						<view class="name">{{ item.name }}</view>
						<view class="distance">{{ addressNow=='请选择'?"":item.disName?item.disName:"" }}</view>
					</view>
					<view class="time">{{ item.updateTime || item.createTime }}</view>
					<text class="text" v-pre>{{ item.content }}</text>
					<view class="detail" @click="goActivityDetail(item)">
						<text>查看详情</text>
						<image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/arrow_right1.png"></image>
					</view>
					<!--					<view class="imgLine" >-->
					<!--						<view class="imgItem"  v-for="(i, inx) in item.list" :key="inx" >-->
					<!--							<image  :src="i"-->
					<!--								@click="preview(i,item.list)"></image>-->
					<!--						</view>-->
					<!--					</view>-->
					<!-- 图片和视频 -->
					<view class="guidebook">
						<view class="img_box">
							<view :class="{'many_img':true}">
								<!-- 遍历 -->
								<!-- 在这里判断图片的数量是单站还是四张，分别给不同样式，来实现，一排是两张还是三张 -->
								<view
									:class="{'img_item':true,'one':item.list&&item.list.length===1 , 'four' : item.list&&item.list.length === 4 , 'many' : item.list&&item.list.length > 4}"
									v-for="(value,index) in item.list" :key="index">
									<!-- item.type == 2 是视频 -->
									<!-- style 的 宽高是 视频标签 bindloadedmetadata="videometa" 方法里计算的宽高 -->
									<!-- 不是 item.type == 2 就是图片 else -->
									<!-- 如果只有一张图片 bindload="oneImageLoad" 获取图片宽高，并计算宽高比，来判断图片的 mode 是 widthFix 还是 heightFix -->
									<image v-if="item.list&&item.list.length===1" class="imgOne"
										@click="previewImage($event,index, item)" :bindload="oneImageLoad" :src="value"
										:data-sources="value" :data-index="index"
										:mode="isHeightMode ? 'heightFix' : 'widthFix'"
										:style="{'height': isHeightMode? '500rpx' : ''}"></image>
									<!-- 多张图片 一律使用 aspectFill 并固定宽高 -->
									<image v-else class="img" :src="value" @click="previewImage($event,index, item)"
										:data-sources="value" :data-index="index" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 占位 -->
		<!-- <view class="z"></view>
		<view class="btn">发布活动</view> -->
	</view>
</template>

<script>
	import myNavbar from '../../components/myNavbar/myNavbar.vue'
	import share from '@/mixins/share.js'

	export default {
		mixins: [share('快来、这附近的活动真的太给力，数量有限')],
		components: {
			myNavbar
		},
		data() {
			return {
				isHeightMode: false,
				videoAd: true,
				addressNow: "请选择",
				tabId: 1,
				tabList: [{
						id: 1,
						text: "距离最近"
					},
					{
						id: 2,
						text: "最新发布"
					},
				],
				activityList: [{
					"createBy": null,
					"createTime": "2023-12-29 14:53",
					"updateBy": null,
					"updateTime": null,
					"remark": null,
					"id": 41,
					"name": "企飞洋官方旗舰店",
					"status": 1,
					"img": "https://www.qifeiy.com/profile/upload/2023/12/29/tmp_445fb95c483b87b05aa7673552b9d469_20231229145147A236.jpg",
					"wxNumber": "211880863",
					"mobile": "18177773634",
					"addr": "新木创新产业园",
					"startTime": "00:00:00",
					"endTime": "23:59:00",
					"content": "2024元旦快乐、诸事皆顺。",
					"imgList": "[\"https://www.qifeiy.com/profile/upload/2023/12/29/tmp_a38b909ca3887aeb3624c51b50a6489c_20231229145136A234.jpg\",\"https://www.qifeiy.com/profile/upload/2023/12/29/tmp_5e06cdc916ff2210c50b48cd8744c5fc_20231229145136A235.jpg\"]",
					"lat": "22.66543197631836",
					"longitude": "114.13915252685547",
					"startDate": "2024-01-01",
					"endDate": "2024-12-31",
					"userId": 335,
					"dis": 12472810,
					"disName": "12472.8km",
					"sortType": null,
					"list": [
						"https://www.qifeiy.com/profile/upload/2023/12/29/tmp_a38b909ca3887aeb3624c51b50a6489c_20231229145136A234.jpg",
						"https://www.qifeiy.com/profile/upload/2023/12/29/tmp_5e06cdc916ff2210c50b48cd8744c5fc_20231229145136A235.jpg"
					]
				}],
				bannerList: []
			}
		},
		onLoad() {
			this.getaddress();
			if (this.$store.state.activityAd) {
				let ad = wx.createInterstitialAd({
					adUnitId: 'adunit-3bd562402dcf40c3'
				})
				ad.onError(() => {})
				ad.show().then(() => {
					this.$store.state.activityAd = false
				})
			}
			this.$api.request({
				url: this.$api.getBanner + "?location=" + 3,
			}).then(res => {
				this.bannerList = res.data;
			})
		},
		onShow() {
			this.initData()
			var that = this;
			//获取系统信息
			wx.getSystemInfo({
				success(res) {
					// res.windowWidth为手机屏幕的宽。
					var windowWidth = res.windowWidth;
					//算出当前宽度下高度的数值
					that.width = windowWidth
				}
			})
		},
		methods: {
			getaddress() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						console.log(res, '地址信息');
						let longtitude = res.longitude
						let latitude = res.latitude
						console.log(latitude, longtitude);
						this.$api.request({
							url: this.$api.actaddress + `?longitude=${longtitude}` +
								`&latitude=${latitude}`
						}).then((res) => {
							// console.log(res.data);
							this.addressNow = res.data.province + res.data.city + res.data.address +
								res.data
								.township
							console.log('调用成功');
						})
					}
				})
			},
			adError() {
				this.videoAd = false
			},
			adClose() {
				this.videoAd = false
			},
			oneImageLoad(e) {
				console.log("123")
				const {
					width,
					height
				} = e.detail
				if (height >= width) {
					this.isHeightMode = true
				}
			},
			preview(url, list) {
				wx.previewImage({
					current: url, // 当前显示图片的http链接
					urls: list // 需要预览的图片http链接列
				})
			},
			// 跳转活动资讯详情
			goActivityDetail(item) {
				uni.navigateTo({
					url: '/myPage/activity/activityDetail?id=' + item.id + "&disName=" + item.disName
				})
			},
			initData() {
				let sortType = this.tabId;
				if (!this.value) {
					sortType = 2;
				}
				this.$api.request({
					url: this.$api.activityAll,
					data: {
						longitude: this.value ? this.value.longitude : null,
						status: 1,
						lat: this.value ? this.value.latitude : null,
						sortType: sortType
					}
				}).then(res => {
					this.activityList = res.data
					// this.imgList=JSON.parse(res.data.imgList)
				})
				let that = this

			},
			previewImage(e, index, item) {
				console.log(e, index, item.list)
				let data = e.currentTarget.dataset
				uni.previewImage({
					current: index,
					urls: item.list
				})
			},
			async handlerChange(res, value) {
				this.value = value
				this.addressNow = value.name
				this.$api.request({
					url: this.$api.activityAll,
					data: {
						longitude: value.longitude,
						lat: value.latitude,
						status: 1
					}
				}).then(res => {
					this.activityList = res.data
					// this.imgList=JSON.parse(res.data.imgList)
				})
			},
			choose() {
				let that = this
				uni.chooseLocation({
					// type: 'wgs84',
					success: function(res) {
						console.log(res)
						that.addressNow = res.name
					}
				});
			},
			// 切换选项卡
			onTab(item) {
				this.tabId = item.id

				this.initData()
			},
			// 查看图片
			enlargePicture(index, imgList) {
				console.log(index)
				console.log(imgList)
				// let photoList = imgList.map(item => {
				// 	return item;
				// });
				uni.previewImage({
					current: index,
					urls: imgList
				});
			},
			goSwiperDetail(item) {
				console.log(item, '111');
				// if(){

				// }
				if (item.type === 1) {
					let str = JSON.stringify(item.content)
					uni.navigateTo({
						url: "/pages/detail/swiperDetail?bannerId=" + item.id
					})
				}
				if (item.type === 2) {
					uni.navigateTo({
						url: "/pages/index/webView?link=" + item.link
					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	@import "@/static/css/app.less";

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.ad-box {
			border-radius: @radius;
			overflow: hidden;
		}

		.tab {
			width: 710rpx;
			display: flex;
			margin-top: 30rpx;

			.item {
				margin: 0 20rpx;
				font-size: 32rpx;
				// font-weight: bold;

				.title {
					color: #8A8A8A;
				}

				.title-on {
					color: #000;
					border-bottom: 5rpx solid #07C160;
				}
			}
		}

		.list {
			width: 710rpx;
			margin-top: 20rpx;
			margin-bottom: 120rpx;

			.item {
				display: flex;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
				padding: 30rpx 30rpx 10rpx;
				border-radius: @radius;

				.left {
					width: 100rpx;
					margin-right: 20rpx;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: @radius;
					}
				}

				.right {
					width: 500rpx;
					margin-right: 20rpx;

					.line {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.name {
							font-size: 32rpx;
							color: #1A1A1A;
						}

						.distance {
							font-size: 32rpx;
							color: #8A8A8A;
							text-align: end;
							margin-top: 10rpx;
						}
					}

					.time {
						font-size: 32rpx;
						color: #1A1A1A;
					}

					.text {
						margin-top: 20rpx;
						font-size: 32rpx;
						color: #1A1A1A;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 5;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 40rpx;
					}

					.detail {
						width: 180rpx;
						font-size: 32rpx;
						color: #07C160;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						top: -40rpx;
						left: 320rpx;
						background-color: #fff;
						line-height: 40rpx;

						image {
							height: 24rpx;
							width: 24rpx;
						}
					}

					.imgLine {
						display: flex;
						align-items: center;
						position: relative;
						top: -10rpx;

						//padding:0px;
						//width:300px;
						/* justify-content: flex-end; //用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
						flex-wrap: wrap; //换行

						.imgItem {
							list-style: none;
							width: 32%;
							height: 100px;
							margin-top: 5px;
						}


						//image {
						//	//height: 150rpx;
						//	//width: 150rpx;
						//	//// border-radius: @radius;
						//	//margin-left: 10rpx;
						//  list-style: none;
						//  width:32%;
						//  height:100px;
						//  margin-top: 5px;
						//}
					}

					//.imgLine>img:only-child{
					//  width:100%;
					//}
					.guidebook .img_box {
						width: 500rpx;

						margin-bottom: 12rpx;
						padding-left: 4rpx;
					}

					.guidebook .img_box .many_img {
						display: flex;
						justify-self: start;
						flex-wrap: wrap;

						.img {
							width: 150rpx;
							height: 150rpx;
							margin-right: 16rpx;
							margin-bottom: 16rpx;
							//border-radius: 16rpx;
							overflow: hidden;
						}

						.imgOne {
							width: 400rpx;

							.img {
								width: 400rpx;

							}
						}
					}

					.guidebook .img_item.four {
						width: 150rpx;
						height: 150rpx;
						margin-right: 16rpx;
						margin-bottom: 16rpx;
						//border-radius: 16rpx;
						overflow: hidden;

						.img {
							width: 150rpx;
							height: 150rpx;
							//border-radius: 16rpx;

							overflow: hidden;

						}
					}

					.guidebook .img_item.four:nth-child(2n) {
						margin-right: 30rpx;
					}

					.guidebook .img_item.many {
						width: 150rpx;
						height: 150rpx;
						margin-right: 16rpx;
						margin-bottom: 16rpx;
						//border-radius: 16rpx;
						overflow: hidden;
					}

					.guidebook .img_item.many:nth-child(3n) {
						margin-right: 0;
					}

				}
			}
		}

		.z {
			margin-top: 170rpx;
		}

		.btn {
			position: fixed;
			bottom: 120rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
			background-color: #07C160;
			border-radius: 50rpx;
			padding: 20rpx 150rpx;
			margin: 80rpx 0 0;
		}

		.ad {
			width: 710rpx;
			display: flex;
			position: relative;
			margin-top: 20rpx;
			height: 0;

			.ad-item {
				width: 100%;
				height: 100%;
				border-radius: 15rpx;

				.ad-img {
					height: 100% !important;
					width: 100%;
					border-radius: 15rpx;
				}
			}
		}
	}
</style>